<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Elmer I Fast build Admin dashboard for any platform</title>
    <meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework."/>
    <meta name="keywords"
          content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, dwh, web app, application"/>
    <meta name="author" content="hencework"/>

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Bootstrap Wysihtml5 css -->
    <link rel="stylesheet" href="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css"/>

    <!-- Data table CSS -->
    <link href="vendors/bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"
          type="text/css"/>

    <!-- Custom CSS -->
    <link href="dist/css/style.css" rel="stylesheet" type="text/css">
    <!-- jQuery -->
    <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
</head>

<body>
<!--/Preloader-->
<div class="wrapper   pimary-color-blue" style="min-height: 650px">
    <!-- Main Content -->
    <!-- Row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0">
                        <div class="contact-list">
                            <div class="row">
                                <!-- <aside class="col-xs-1">
                                 </aside>-->
                                <aside class="col-xs-1 col-md-1">
                                </aside>

                                <aside class="col-lg-10 col-md-8 pl-0">
                                    <div class="panel pa-0">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body  pa-0">
                                                <div class="table-responsive mb-30">
                                                    <table id="datable_1" class="table  display table-hover mb-30"
                                                           data-page-size="10">
                                                        <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>姓名</th>
                                                            <th>Email</th>
                                                            <th>电话</th>
                                                            <th>创建时间</th>
                                                            <th>修改时间</th>
                                                            <th>操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                        <aside class="col-lg-2 col-md-4 pr-0">
                                                            <div class="mt-20 mb-20 ml-15 mr-15">
                                                                <a href="#myModal" data-toggle="modal" title="Compose"
                                                                   class="btn btn-success btn-block">
                                                                    添加用户
                                                                </a>
                                                                <!-- Modal -->
                                                                <div aria-hidden="true" role="dialog" tabindex="-1"
                                                                     id="myModal"
                                                                     class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close"
                                                                                        data-dismiss="modal"
                                                                                        aria-hidden="true">×
                                                                                </button>
                                                                                <h4 class="modal-title">添加用户</h4>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form class="form-horizontal form-material">
                                                                                    <div class="form-group">
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   placeholder="请输入用户名"
                                                                                                   id="addName"
                                                                                                   name="username">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password"
                                                                                                   class="form-control"
                                                                                                   placeholder="请输入密码"
                                                                                                   id="addPwd"
                                                                                                   name="password">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password"
                                                                                                   class="form-control"
                                                                                                   placeholder="请确认密码"
                                                                                                   id="addPwd2">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   placeholder="请填写邮箱"
                                                                                                   id="addEmail"
                                                                                                   name="email">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text"
                                                                                                   class="form-control"
                                                                                                   placeholder="请填写手机号码"
                                                                                                   id="addPhone"
                                                                                                   name="phone">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <span id="errMsg"></span>
                                                                                        </div>

                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button"
                                                                                        class="btn btn-info waves-effect"
                                                                                        data-dismiss="modal"
                                                                                        onclick="save()">保存
                                                                                </button>
                                                                                <button type="button"
                                                                                        class="btn btn-default waves-effect"
                                                                                        data-dismiss="modal">取消
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!-- /.modal-content -->
                                                                    </div>
                                                                    <!-- /.modal-dialog -->
                                                                </div>
                                                                <!-- /.modal -->
                                                            </div>

                                                        </aside>
                                                        <div aria-hidden="true" role="dialog" tabindex="-1"
                                                             id="myModal2"
                                                             class="modal fade" style="display: none;">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close"
                                                                                data-dismiss="modal"
                                                                                aria-hidden="true">×
                                                                        </button>
                                                                        <h4 class="modal-title">修改用户</h4>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <form class="form-horizontal form-material">
                                                                            <div class="form-group">
                                                                                <div class="col-md-12 mb-20">
                                                                                    <label>用户名</label>
                                                                                    <input type="text"
                                                                                           class="form-control"
                                                                                           placeholder="请输入用户名"
                                                                                           id="editName"
                                                                                           name="username">
                                                                                </div>
                                                                                <div class="col-md-12 mb-20">
                                                                                    <label>邮箱</label>
                                                                                    <input type="text"
                                                                                           class="form-control"
                                                                                           placeholder="请填写邮箱"
                                                                                           id="editEmail"
                                                                                           name="email">
                                                                                </div>
                                                                                <div class="col-md-12 mb-20">
                                                                                    <label>手机号码</label>
                                                                                    <input type="text"
                                                                                           class="form-control"
                                                                                           placeholder="请填写手机号码"
                                                                                           id="editPhone"
                                                                                           name="phone">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <span id="errMsg2"></span>
                                                                                </div>

                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button"
                                                                                class="btn btn-info waves-effect"
                                                                                onclick="update()">保存
                                                                        </button>
                                                                        <button type="button"
                                                                                class="btn btn-default waves-effect"
                                                                                data-dismiss="modal">取消
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <!-- /.modal-content -->
                                                            </div>
                                                            <!-- /.modal-dialog -->
                                                        </div>
                                                    </table>
                                                    <!--
                                                       分页插件
                                                     -->
                                                    <nav>
                                                        <ul class="pagination">
                                                            <li>
                                                                <a href="#" aria-label="Previous" onclick="left()">
                                                                    <span aria-hidden="true">&laquo;</span>
                                                                </a>
                                                            </li>
                                                            <!--                                                            <li class="active"><a href="#">1</a></li>
                                                                                                                        <li><a href="#">2</a></li>
                                                                                                                        <li><a href="#">3</a></li>-->
                                                            <li>
                                                                <a href="#" aria-label="Next" onclick="right()">
                                                                    <span aria-hidden="true">&raquo;</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </nav>
                                                    <!-- 分页插件结束 -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->

</div>
<!-- /#wrapper -->

<!-- JavaScript -->

<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- wysuhtml5 Plugin JavaScript -->
<script src="vendors/bower_components/wysihtml5x/dist/wysihtml5x.min.js"></script>

<script src="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.js"></script>

<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>

<!-- Bootstrap Wysuhtml5 Init JavaScript -->
<script src="dist/js/bootstrap-wysuhtml5-data.js"></script>

<!-- Data table JavaScript -->
<!--<script src="vendors/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="dist/js/dataTables-data.js"></script>-->

<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>

<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>

<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

</body>
</html>
<script>
    var prePage = 0;
    var nextPage = 0;
    var isFirstPage = false;
    var isLastPage = false;
    var editid=0;


    //页面加载函数
    $(function () {
        findByPage(1);//页面初始化查询第一页
    })

    function findByPage(pageNum) {
        //每次查询会生成新的tr与li，查询前先清除
        $("tbody tr").remove();
        $("li[name='myli']").remove();


        //发送ajax请求获取响应
        $.post("/lagouVis/user/list.do", "pageNum=" + pageNum + "&pageSize=10", function (data) {
            //初始化成员
            prePage = data.data.prePage;
            nextPage = data.data.nextPage;
            isFirstPage = data.data.isFirstPage;
            isLastPage = data.data.isLastPage;

            //获取响应中的的数据
            var list = data.data.list;
            //循环查到的一页数据
            for (var i = 0; i < list.length; i++) {
                var $tr = $("<tr>\n" +
                    "<th>" + list[i].id + "</th>\n" +
                    "<th>" + list[i].username + "</th>\n" +
                    "<th>" + list[i].email + "</th>\n" +
                    "<th>" + list[i].phone + "</th>\n" +
                    "<th>" + list[i].createTime + "</th>\n" +
                    "<th>" + list[i].updateTime + "</th>\n" +
                    "<th>" +
                    "<a href='#myModal2' class='text-inverse pr-10' title='Edit' data-toggle='modal' " +
                    "onclick='editUserInit("+list[i].id+")'><i class=\"zmdi zmdi-edit txt-warning\"></i></a><a href='javascript:void(0)' class='text-inverse' title='Delete' data-toggle='tooltip' ><i class='zmdi zmdi-delete txt-danger'></i></a>"
                    + "</tr>");
                $("tbody").append($tr);
            //
            }
            //动态生成页码
            var totalPage = data.data.pages;
            for (var i = 0; i < totalPage; i++) {
                var $li = $("<li name='myli'><a href='#' onclick='findByPage(" + (i + 1) + ")'>" + (i + 1) + "</a></li>");
                //把li加入页面中
                $("li:last").before($li);
                //判断当前页是哪一页
                if ((i + 1) == data.data.pageNum) {
                    $li.prop("class", "active");
                }
            }
        }, "json")
        //获取到的一页数据list，循环申城tr td 把数据嵌套在 tr td 放到tbody中
    }

    //点击向左的方法
    function left() {
        //判断当前页是否为首页//是则返回
        if (isFirstPage) {
            return;
        }
        //否返回前一页
        findByPage(prePage);
    }

    //点击向右的方法
    function right() {
        //判断当前页是否为尾页//是则返回
        if (isLastPage) {
            return;
        }
        //否返回后一页
        findByPage(nextPage);
    }

    function save() {
        var name = $("#addName").val();
        var pwd = $("#addPwd").val();
        var pwd2 = $("#addPwd2").val();
        var email = $("#addEmail").val();
        var phone = $("#addPhone").val();

        if (pwd != pwd2) {
            $("#errMsg").html("两次密码不一致");
        } else {
            $.post("/lagouVis/user/add.do",
                {
                    "username": name,
                    "password": pwd,
                    "email": email,
                    "phone": phone
                }, function (data) {
                    if (data.status == 0) {
                        alert("添加成功");
                        location.reload();
                    } else {
                        alert("添加失败" + data.msg)
                    }
                })
        }
    }

    function editUserInit(id) {
        editid=id;
        $.post("/lagouVis/user/findById.do",{"id":id},
            function(user) {
            $("#editName").val(user.data.username);
            $("#editEmail").val(user.data.email);
            $("#editPhone").val(user.data.phone);
            $("#errMsg2").html("");
            },"json");
    }

    function update() {
        var username = $("#editName").val();
        var email = $("#editEmail").val();
        var phone = $("#editPhone").val();
        var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        var regPhone = /^1[3456789]\d{9}$/;
        if (!regEmail.test(email)) {
            $("#errMsg2").html("邮箱格式有误");
            return;
        }
        if (!regPhone.test(phone)) {
            $("#errMsg2").html("电话格式有误");
            return;
        }
        $.post("/lagouVis/user/edit.do",{"id":editid,"username":username,"email":email,"phone":phone},function (data) {
            if (0 == data.status) {
                alert("修改成功");
                location.reload();
            } else {
                alert("修改失败" + data.msg)
            }
        },"json");
        $("#myModal2").modal("hide");
    }

</script>
